																			<!--阶段划分	-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta http-equiv="Content-Language" content="zh-CN" />
	<script type="text/javascript" th:src="@{/js/jquery1.4.js}"></script>
	<title>码虫-阶段划分</title>
	<meta name="Keywords" content="" />
	<meta name="Description" content="" />
	<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
	<!-- Le styles -->
	<link rel="stylesheet" type="text/css" th:href="@{/style/basic.css}" />
	<link rel="stylesheet" type="text/css" th:href="@{/style/login.css}" />
	<script type="text/javascript" th:src="@{/js/bioV4.min.js}"></script>
	<script type="text/javascript" th:src="@{/js/jquery.lazyload.mini.js}"></script>
	<link rel="stylesheet" type="text/css" th:href="@{/style/comment.css}" />
	<script type="text/javascript" th:src="@{/js/function.js}"></script>
	<link type="text/css" rel="stylesheet" th:href="@{/style/biobox2.css}" />
	<script type="text/javascript" th:src="@{/js/biobox.js}"></script>
	<style type="text/css">
		.qrhf {
		float:right;
		position:fixed;
		right: 10px;			
		}
	</style>

	<head>
		<script type="text/javascript">
			var i = 1;

			function cDiv() {
				var oDiv = document.createElement("div");
				oDiv.style.width = "1000px"; //宽度
				oDiv.style.height = "500px"; //长度
				oDiv.style.backgroundColor = "white"; //背景色
				oDiv.style.marginLeft = "100px";
				oDiv.id = 'div' + i;
//				oDiv.appendChild(inputDiv);
				var input1=document.createElement("input");
				input1.readOnly="true";
				input1.value='p'+(i+1);
				input1.style.backgroundColor="#FFFFFF";
				input1.style.width="40px";
				input1.style.height="40px";
				input1.style.textAlign="center";
				input1.style.marginLeft="10px";
				input1.style.borderColor="#1FB1E1";
				input1.style.color="#1FB1E1";
				input1.style.marginTop="3px";
				oDiv.appendChild(input1);
				//第一个span
				var span1=document.createElement("span");
				span1.style.marginLeft="25px";
				span1.innerText="阶段名称";
				oDiv.appendChild(span1);
				//第一个span之后的input框
				var input2=document.createElement("input");
				input2.type="text";
				input2.name='jd'+(1+i)+'name';
				input2.placeholder="请输入阶段名称";
				input2.style.marginLeft="2px";
				oDiv.appendChild(input2);
				//第二个span
				var span2=document.createElement("span");
				span1.style.marginLeft="25px";
				span1.innerText="计划交付日期";
				oDiv.appendChild(span1);
				//第二个span之后的input框
				var input3=document.createElement("input");
				input3.type="date";
				input3.value="2018-06-08"
				input3.name='jd'+(1+i)+'date';
				input3.placeholder="请选择计划交付日期";
				input3.style.marginLeft="2px";
				oDiv.appendChild(input3);
				//第一个p
				var p1=document.createElement("p");
				p1.style.marginLeft="80px";
				p1.innerText="计划交付金额";
				oDiv.appendChild(p1);
				//第一个p之后的input框
				var input4=document.createElement("input");
				input4.type="text";
				input4.name='jd'+(1+i)+'money';
				input4.placeholder="请选择计划交付金额";
				input4.style.marginLeft="80px";
				oDiv.appendChild(input4);
				//第二个p
				var p2=document.createElement("p");
				p2.style.marginLeft="80px";
				p2.innerText="交付说明";
				oDiv.appendChild(p2);
				//第二个P之后的textarea
				var textarea1=document.createElement("textarea");
				textarea1.type="text";
				textarea1.maxLength="500";
				textarea1.name="itemDate"+i;
				textarea1.style.marginLeft="80px";
				textarea1.style.width="700px";
				textarea1.style.height="300px"
				textarea1.style.resize="none";
				oDiv.appendChild(textarea1);
				
				
				
				document.body.appendChild(oDiv);
				//以下是增加和删除div
				var addinput = document.createElement("input");
				addinput.style.marginLeft = "100px";
				addinput.type = 'button';
				addinput.id = 'add' + i;
				addinput.onclick = cDiv;
				addinput.value = '增加阶段';
				document.body.appendChild(addinput);
				var rminput = document.createElement("input");
				rminput.style.marginLeft = "100px";
				rminput.type = 'button';
				rminput.id = '' + i; // 这里为了动态生成和动态删除 上面的元素。
				rminput.onclick = removeE; // 要直接加 函数名，就算有参数也是如此。
				rminput.value = '删除阶段';
				document.body.appendChild(rminput);
				i++;
			}

			function removeE() {
				var id = this.id; // 得到执行函数元素的 id 值。(重要)
				if(id == null)
					alert("阶段划分时，至少有一个阶段！"); // 建议在这里验证一下，也是一个好习惯。成功之后要删掉	
				document.body.removeChild(document.getElementById('div' + id));
				// 拼接 id 	
				document.body.removeChild(document.getElementById('add' + id));
				document.body.removeChild(document.getElementById('' + id));
			}
		</script>

		<body>

			<script type="text/javascript" th:src="@{/js/borsertocss.js}">
			</script>
			<!-- 判断在IE9以下浏览器中根据像素的不同而设置的样式 -->
			<style type="text/css">
				.dhl {
					height: 40px;
				}
				
				.ulclass {
					position: relative;
					display: inline-block;
				}
			</style>

			<!--头部代码开始-->
			<div class="navbar navbar-fixed-top" style="_position: relative;_z-index: 10000;">
				<div class="navbar-inner">
					<div class="container">
						<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
							<span class="icon-bar"></span>
							<span class="icon-bar"></span>
							<span class="icon-bar"></span>
						</a>
						<div class="nav-collapse" style="height:20px;">
							<ul class="nav" id="navID" style="height: 30px;">
								<li style="height: 30px;" class="">
									<a class="dhl" href="index.html">
										<h2>码虫</h2></a>
								</li>
								<li style="height: 30px;" class="">
									<a class="dhl" href="cxzx_list.html"><b>项目</b></a>
								</li>
								<li style="height: 30px;" class="">
									<a class="dhl" href="cxfw_list.html"><b>估价</b></a>
								</li>
								<li style="height: 30px;" class="">
									<a class="dhl" href="tzjg_list.html"><b>帮助</b></a>
								</li>
							</ul>
						</div>
						<!--/.nav-collapse -->

						<ul class="nav pull-right login-none nav-tips ulclass">
							<li class="ie6png divider-vertical" style="_width: 30px;_height: 40px;_background: url(static/images/icons.png) no-repeat 10px -106px;">
								<a class="dropdown-toggle clearfix" href="javascript:;" style="padding: 2px 5px;"><img class="logo-before pull-left" src="images/avatar-icon.png" /></a>
							</li>
							<li class=""></li>
						</ul>
						<div class="popup-div tips-div" style="position: absolute;z-index: 10000001;display: none;"></div>
					</div>
				</div>
			</div>
			<!--头部代码结束-->
<style type="text/css">
	.jdSign{
		background-color:#FFFFFF;
		width: 40px;height: 40px;
		text-align: center;
		margin-left: 10px;
		border-color: #1FB1E1;
		color: #1FB1E1;
	}
	.ms{
		margin-left: 80px;
		width: 700px;
		height: 200px;
		resize: none;
	}
</style>



			<!--动态添加div开始-->
			<div style="margin-top: 30px;margin-left: 100px;">
				<h2>阶段划分</h2>
				
				<div style="background-color: white;width: 1000px;height: 40px;">
					阶段数目：<input readonly="readonly" value="2" style="background-color: white;" />
				</div>
				
				<div style="width:1000px;height:500px;background-color:white;">
				<input readonly="readonly" value="P1" class="jdSign"/>
				<span style="margin-left: 25px;">阶段名称</span>
				<input type="text" value="" placeholder="请输入阶段名称" name="jd1name" />
				<span style="margin-left: 25px;">计划交付日期</span>
				<input type="date" value="2018-06-08" placeholder="请输入交付日期" name="jd1name" />
				<p style="margin-left: 80px;">计划交付金额</p>
				<input type="text" value="" placeholder="请选择计划交付金额" style="margin-left: 80px;" name="jd1name" />
				<p style="margin-left: 80px;">交付说明</p>
				<textarea type="textera" maxlength="500" value="" name="itemDate" class="ms"></textarea>
				
				</div>
				<input type="button" id="btn" onclick="cDiv()" value='增加阶段' />
				<input type="button" id="rmbtn" onclick="removeE()" value='删除阶段' style="margin-left: 100px;" />
				
			</div>
			<!--动态添加div开始-->

			<div class="qrhf">
				<button  name="fanhui" id="fanhui" value="返回" style="float: right;background-color: white;width: 80px;height: 40px;"><a href="">返回</a></button>
				<button  name="huafen" id="huafen" value="确认划分" style="float: right;background-color: white;width: 80px;height: 40px;"><a href="">确认划分</a></button>
			</div>
		</body>